<script setup>

import { ref, computed } from 'vue'
import { useIndexStore } from '../../pinia/index'
import { ElMessage } from "element-plus"
import { request } from '@/utils/axios/request.js'
import { useRouter } from 'vue-router'
import local from '@/components/local.vue'

let locabob = ref(false)
let router = useRouter()
let oldPassword = ref('');
let oldbob = ref(false)
let newPassword = ref('');
let newbob = ref(false)
let store = useIndexStore()
// 小眼睛
let showPassword = ref(false)

let user = ref('')

let oldchange = () => {
    if (!oldPassword.value) {
        oldbob.value = true
    } else {
        oldbob.value = false
    }
}

let newchange = () => {
    if (!newPassword.value) {
        newbob.value = true
    } else {
        newbob.value = false
    }
}

let reset = () => {

    oldPassword.value = '';
    oldbob.value = false
    newPassword.value = '';
    newbob.value = false
    user.value = ''
}

// 修改密码
const save = async () => {
    // !/^[\w]{6,14}$/.test(oldPassword.value) ||
    if ( !/^[\w]{6,14}$/.test(newPassword.value) || !/^[\w]{6,14}$/.test(user.value)) {
        ElMessage.error('密码最少6位，最大14位，由字母和数字组成')
        oldPassword.value = ''
        // newPassword.value = ''
        // user.value = ''
        return;
    }
    let userItems = ref('')
    let usernameLoca = localStorage.getItem('username')
    if (usernameLoca) {
        try {
            locabob.value = true
            let newdata = await request({
                url: `/admin/user/users1?username=${usernameLoca}`,
                method: 'get'
            })
            newdata.data.forEach(item => {
                item.role = item.role == 0 ? '超级管理员' : item.role == 1 ? '普通管理员' : '普通员工'
                item.status = item.status == 1 ? '正常' : '停用'
            })
            userItems.value = newdata.data[0]
        } catch (err) {
            console.log(err);
        }
        locabob.value = false
    }
    if (oldPassword.value != userItems.value.password) {
        ElMessage.error('原始密码错误')
        oldPassword.value = ''
        return;
        
    }
    if (newPassword.value != user.value) {
        ElMessage.error('输入两次密码不一致')
        // newPassword.value = ''
        user.value = ''
        return;
    }
    let obj = {}
    obj.password = user.value
    try {
        locabob.value = true
        let data = await request({
            url: '/admin/user/users',
            method: 'put',
            data: {
                newTableDate: obj,
                id: userItems.value.id
            }
        })
        localStorage.removeItem('username')
        router.push('/login')
        ElMessage.success(data.message)
    } catch (err) {
        console.log(err);
    }
    locabob.value = false
    reset()
}

</script>

<template>
    <div class="box">
        <local v-show="locabob" />
        <div class="ps">
            <span>原始密码:</span>
            <el-input class="color" @blur="oldchange" type="password" v-model="oldPassword" placeholder="6~14位,由字母和数字组成"
                style="width: calc(100% - 100px);" :show-password="true">
                <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword = !showPassword"></i>
            </el-input>
        </div>
        <p v-show="oldbob" style="padding-left: 90px;font-size: 14px;color: red;">旧密码不能为空</p>
        <div class="ps" style="padding-left:45px">
            <span>新密码:</span>
            <el-input class="color" @blur="newchange" type="password" v-model="newPassword" placeholder="6~14位,由字母和数字组成"
                style="width: calc(100% - 100px);" :show-password="true">
                <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword = !showPassword"></i>
            </el-input>
        </div>
        <p v-show="newbob" style="padding-left: 90px;font-size: 14px;color: red;">新密码不能为空</p>
        <div class="ps">
            <span> 确认密码:</span>
            <el-input class="color" v-model="user" type="password" placeholder="6~14位,由字母和数字组成" style="width: calc(100% - 100px);"
                :show-password="true">
                <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword = !showPassword"></i>
            </el-input>
        </div>
        <el-row class="ps">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button @click="reset">重置</el-button>
        </el-row>
    </div>
</template>

<style scoped lang="less">
:deep .el-input__inner{
    font-size: 10px;
}
.box {
    height: calc(100% - 85px);
    display: flex;
    flex-direction: column;
    width: 100%;

    p {
        transform: translateX(20px);
    }

    .ps {
        padding-top: 15px;
        padding-left: 30px;
        width: 300px;
        font-size: 14px;
        font-weight: 700;

        span {
            margin-right: 20px;
        }

    }

}
</style>